
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
         #red,#green{
             position: absolute;
             top: 0;
             left: 0;
             z-index: 1;

             
         }
         #black{
             position: absolute;
             top: 0;
             left: 0;
             z-index: 2;
         }
         
        </style>
    </head>
    <body>
            <canvas id="green" style="background:green"></canvas>
        <canvas id='red' style="display: none" > </canvas>
        <canvas id="black"></canvas>
   
        <script>
            var red=document.getElementById("red");
            var black=document.getElementById("black");
            var green=document.getElementById("green");
            var ctx2=red.getContext('2d');
            var ctx=black.getContext("2d");
            var ctx3=green.getContext("2d");


                
                green.width=window.innerWidth;
                green.height=window.innerHeight;
                black.width=window.innerWidth;
                black.height=window.innerHeight;
                red.width=window.innerWidth;
                red.height=window.innerHeight;
//              ctx.fillRect(0,0,100,100);
//              a,b,c,d分别代表x方向偏移,y方向偏移,宽，高
            var string1 = "单身狗";
                string1.split("");
            var fontsize=20;
                columns=black.width/fontsize;
            var drop = [];
            for(var x=0;x<columns;x++){
                drop[x]=0;
            }//为啥要那么多0
        function drap(){
            ctx.save();
            ctx.fillStyle="rgba(0,0,0,.1)";
            ctx.fillRect(0,0,black.width,black.height);
            ctx.fillStyle="#0F0";
            ctx.font=fontsize+"px arial";
            ctx3.save();
            ctx3.fillStyle="rgba(0,0,0,0.05)";
            ctx3.fillRect(0,0,black.width,black.height);
            ctx3.fillStyle="red";
            ctx3.font=fontsize+"px arial";
            for(var i=0;i<drop.length;i++){
                var text1=string1[Math.floor(Math.random()*string1.length)];
                ctx.fillText(text1,i*fontsize,drop[i]*fontsize);
                ctx3.fillText(text1,i*fontsize,drop[i]*fontsize);

                drop[i]++;
     
               
                ctx2.fillText("秀恩爱分得快",window.innerWidth/2-600,window.innerHeight/2+50);
                
            
                ctx2.globalAlpha = .1;
                ctx.globalCompositeOperation="destination-out"

                ctx.drawImage(red, 0, 0, black.width, black.height);
                ctx.globalCompositeOperation="source-over";
                if(drop[i]*fontsize>black.height&&Math.random()>0.9){//90%的几率掉落
                    drop[i]=0;
                }
            }
            ctx.stroke();
            
        }
        
        
       

         
        setInterval(drap,20);
        ctx2.fillStyle="rgba(255,165,0,.02)";
        ctx2.font="200px arial";
        
        </script>
        </body>
        </html>